<template>
  <div class="container">
    <!-- 2. 子传父: 父组件内, 监听自定义事件  -->
    <subject-table :list="list" @delByIndex="delByIndexFn"></subject-table>
    <add-form></add-form>
  </div>
</template>

<script>
import AddForm from "./components/AddForm.vue";
import SubjectTable from "./components/SubjectTable.vue";

export default {
  components: { SubjectTable, AddForm },
  name: "App",
  data() {
    return {
      list: [
        {
          id: 100,
          subject: "语文",
          score: 99,
          time: new Date("2010-08-12"),
        },
        {
          id: 101,
          subject: "数学",
          score: 34,
          time: new Date("2020-09-01"),
        },
        {
          id: 102,
          subject: "英语",
          score: 25,
          time: new Date("2018-11-22"),
        },
        {
          id: 103,
          subject: "体育",
          score: 100,
          time: new Date("2020-12-12"),
        },
      ],
    };
  },
  methods: {
    delByIndexFn(index) {
      // 3. 父组件内, 方法内完成删除的逻辑
      console.log("index  ----->  ", index);
      this.list.splice(index, 1);
    },
  },
};
</script>

<style scoped></style>
